<template>
	<view>
		<!-- <cu-custom :isBack="true" :isFixed="true">
			<block slot="backText">返回</block>
		</cu-custom> -->
		<view class="video-cont">
			<video :poster="detail.cover" objectFit="cover" :src="detail.video"></video>
		</view>
		<view class="cont">
			<view class="title solid-bottom">{{detail.title}}</view>
			<view class="info">{{detail.intro}}</view>
			<rich-text :nodes="content | filterCont(content)"></rich-text>
		</view>
		<loading v-if="loading"></loading>
		<v-footer :fixed="false"></v-footer>
	</view>
</template>

<script>
	import VFooter from "@/components/Footer.vue"
	import cuCustom from '@/colorui/components/cu-custom.vue'
	import ColumnModule from "@/Api/Column.js"
	export default {
		components: {
			VFooter,
			cuCustom
		},
		data() {
			return {
				loading: true,
				content: '',
				detail: null
			};
		},
		filters: {
			filterCont(cont) {
				return cont.replace(/\<img/gi, '<img style="max-width: 100%;" ')
			},
		},
		onLoad(options) {
			ColumnModule.getStrategyDetail(options.id)
				.then(res => {
					this.detail = res
					this.content = res.content
					setTimeout(() => this.loading = false, 300)
				})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.video-cont {
		width: 100%;
		height: 375rpx;

		video {
			width: 100%;
			height: 100%;
		}
	}

	.header-image {
		height: 375rpx;
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.cont {
		padding: 40rpx;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: #000000;
			line-height: 48rpx;
			padding-bottom: 40rpx;
		}

		.info {
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
		}
	}
</style>
